<!-- 发布投票 -->
<template>
  <div style="color: #5f5f5f;">

    <el-dialog
      title="增加选项"
      :visible.sync="showAddOptionDialog"
      width="30%"
    >
      <el-form
        ref="optionForm"
        :model="optionForm"
        label-width="70px"
      >
        <el-form-item label="选项名称">
          <el-input v-model="optionForm.name"></el-input>
        </el-form-item>
        <el-form-item label="选项图片">
          <upload-image @image="setOptionImage"></upload-image>
        </el-form-item>
        <el-form-item label="选项描述">
          <mavon-editor
            v-model="optionForm.description"
            :subfield="false"
            class="content"
          />
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="showAddOptionDialog = false">取 消</el-button>
        <el-button
          type="primary"
          @click="addOptionConfirm"
        >确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="更新选项"
      :visible.sync="showUpdateOptionDialog"
      width="30%"
    >
      <el-form
        ref="optionForm"
        :model="optionForm"
        label-width="70px"
      >
        <el-form-item label="选项名称">
          <el-input v-model="optionForm.name"></el-input>
        </el-form-item>
        <el-form-item label="选项图片">
          <upload-image
            :image="optionForm.image"
            @image="setOptionImage"
          ></upload-image>
        </el-form-item>
        <el-form-item label="选项描述">
          <mavon-editor
            v-model="optionForm.description"
            :subfield="false"
            class="content"
          />
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="showUpdateOptionDialog = false">取 消</el-button>
        <el-button
          type="primary"
          @click="showUpdateOptionDialog = false"
        >确 定</el-button>
      </span>
    </el-dialog>

    <el-form
      ref="voteForm"
      :model="voteForm"
      label-width="120px"
      class="vote-form"
    >
      <el-form-item
        label="投票名称"
        class="vote-form-input"
      >
        <el-input v-model="voteForm.title"></el-input>
      </el-form-item>
      <el-form-item
        label="投票描述"
        class="vote-form-input"
      >
        <el-input v-model="voteForm.description"></el-input>
      </el-form-item>
      <el-form-item label="投票图片">
        <upload-image :image="voteForm.image" @image="setVoteImage"></upload-image>
      </el-form-item>
      <!-- <el-form-item
        label="公钥"
        class="vote-form-input"
      >
        <el-input v-model="voteForm.publicKey"></el-input>
      </el-form-item>
      <el-form-item
        label="私钥"
        class="vote-form-input"
      >
        <el-input v-model="voteForm.privateKey"></el-input>
      </el-form-item> -->
      <el-form-item
        label="投票持续时间"
        class="vote-form-input"
      >
        <el-col :span="12">
          <el-date-picker
            type="date"
            placeholder="开始日期"
            v-model="voteForm.startTime"
            style="width: 100%;"
          ></el-date-picker>
        </el-col>
        <el-col :span="12">
          <el-date-picker
            placeholder="结束时间"
            v-model="voteForm.endTime"
            style="width: 100%;"
          ></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="投票选项">
        <el-button @click="addOption">
          增加选项
        </el-button>
        <div class="cards">
          <option-item
            v-for="(item, index) in voteForm.options"
            :key="index"
            :id="item.optionId"
            :name="item.name"
            :image="item.image"
            :description="item.description"
            :width="'400px'"
            :setShadowAlways="true"
            :loadOperation="true"
            @updateOption="updateOption"
            @deleteOption="deleteOption"
          ></option-item>
        </div>
      </el-form-item>
      <el-form-item label="投票人员">
        <el-button @click="addUser">
          增加人员
        </el-button>
        <el-table
          class="user-table"
          :data="voteForm.users"
          border
        >
          <el-table-column
            prop="userId"
            label="用户 id"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.edit">
                <el-select
                  v-model="userValue"
                  placeholder="请选择"
                  @change="changeUser"
                >
                  <el-option
                    v-for="(item, index) in userSelect"
                    :key="index"
                    :label="item.username"
                    :value="item.userId"
                  >
                    <span style="float: left">{{ item.userId }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.username }}</span>
                  </el-option>
                </el-select>
              </span>
              <span v-else>{{scope.row.userId}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="username"
            label="用户账号"
          >
          </el-table-column>
          <el-table-column
            prop="hashcode"
            label="用户密钥"
          >
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button
                v-show="!scope.row.edit"
                type="text"
                @click="editRow(scope.$index)"
              >编辑</el-button>
              <el-button
                v-show="scope.row.edit"
                type="text"
                @click="editRow(scope.$index)"
              >保存</el-button>
              <el-button
                @click="deleteRow(scope.$index)"
                type="text"
              >移除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button @click="save">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import UploadImage from "@/components/UploadImage/index.vue";
import OptionItem from "@/components/OptionItem/index.vue";

export default {
  components: {
    OptionItem,
    UploadImage,
  },
  data() {
    return {
      uploadDisabled: false,
      showAddOptionDialog: false,
      showUpdateOptionDialog: false,
      showCropperDialog: false,
      voteForm: {
        title: "",
        startTime: "",
        endTime: "",
        description: "",
        // publicKey: "",
        // privateKey: "",
        image: "",
        options: [],
        users: [],
      },
      optionForm: {
        name: "",
        image: "",
        description: "",
      },
      userSelect: [],
      userValue: {},
    };
  },
  methods: {
    addOption() {
      this.showAddOptionDialog = true;
    },
    addOptionConfirm() {
      this.showAddOptionDialog = false;
      this.voteForm.options.push({
        optionId: Math.floor(Math.random() * 1000),
        name: this.optionForm.name,
        image: this.optionForm.image,
        description: this.optionForm.description,
      });
      this.resetForm();
    },
    addUser() {
      this.voteForm.users.push({
        edit: false,
      });
    },
    updateOption(e) {
      this.optionForm = this.voteForm.options.filter((v) => v.id === e)[0];
      this.showUpdateOptionDialog = true;
    },
    updateOptionConfirm() {
      this.resetForm();
      this.voteForm.option.filter((v) => v.id === e)[0] = {
        optionId: Math.floor(Math.random() * 1000),
        name: this.optionForm.name,
        image: this.optionForm.image,
        description: this.optionForm.description,
      };
    },
    deleteOption(e) {
      this.voteForm.options = this.voteForm.options.filter((v) => v.optionId !== e);
    },
    resetForm() {
      this.optionForm = {
        name: "",
        image: "",
        description: "",
      };
    },
    setVoteImage(e) {
      this.voteForm.image = e;
    },
    setOptionImage(e) {
      this.optionForm.image = e;
    },

    editRow(index) {
      this.voteForm.users[index].edit = !this.voteForm.users[index].edit;

      if (!this.voteForm.users[index].edit) {
        this.voteForm.users[index].userId = this.userTemp.userId;
        this.voteForm.users[index].username = this.userTemp.username;
      } else if (
        this.voteForm.users[index].edit &&
        this.userSelect.length === 0
      ) {
        this.getUserAll();
      }
    },
    deleteRow(index) {
      this.voteForm.users.splice(index, 1);
    },
    changeUser(e) {
      this.userTemp = this.userSelect.filter((v) => v.userId == e)[0];
    },

    toCheck() {
      this.$router.push({
        path: "/check/check",
        query: {
          id: id,
        },
      });
    },
    toVote(id) {
      this.$router.push({
        path: "/vote",
        query: {
          id: id,
        },
      });
    },

    save() {
      this.$refs.voteForm.validate((valid) => {
        let voteFormTemp = this.voteForm;

        this.eraseField(voteFormTemp);

        if (valid) {
          this.$store
            .dispatch("vote/save", voteFormTemp)
            .then((res) => {
              this.$message({
                showClose: true,
                message: "保存成功",
                type: "success",
              });
            })
            .catch(() => {});
        }
      });
    },
    eraseField(voteFormTemp) {
      voteFormTemp.users.forEach((element) => {
        delete element.edit;
        delete element.username;
        delete element.walletUrl;
        delete element.name;
        delete element.avatar;
        delete element.address;
        delete element.createTime;
        delete element.updateTime;
        delete element.isDelete;
      });
      voteFormTemp.options.forEach((element) => {
        delete element.isDelete;
      });
    },
    getVoteInfo() {
      this.$store
        .dispatch("vote/info", { id: this.id })
        .then((res) => {
          this.voteForm.voteId = res.voteId;
          this.voteForm.userId = res.userId;
          this.voteForm.title = res.title;
          this.voteForm.image = res.image;
          this.voteForm.startTime = res.startTime;
          this.voteForm.endTime = res.endTime;
          this.voteForm.description = res.description;
          this.voteForm.options = res.options;
          this.voteForm.users = res.users;
        })
        .catch(() => {});
    },
    getUserAll() {
      this.$store.dispatch("user/all").then((res) => {
        this.userSelect = res;
      });
    },
  },
  created() {
    this.id = this.$route.query.id;
    if (this.id) {
      this.getVoteInfo();
    }
  },
};
</script>

<style scoped>
.vote-form {
  padding: 20px;
  /* width: 600px; */
}

.vote-form-input {
  width: 600px;
}
</style>